<template>
  <view class="w-[90%] h-[400rpx] mx-auto flex justify-center items-center">
    <image
      :src="childImg"
      mode="scaleToFill"
      class="bg-i w-[200rpx] h-[200rpx] rounded-full"
      @click="selectImage"
    />
  </view>
  <From
    ref="formRef"
    :rules="rules"
    :formSchema="schema"
    class="mt-20rpx"
    :initialData="childInfo"
    @submitForm="submitForm"
  />
</template>

<script setup lang="ts">
import From from '@/components/Form/FormComponent.vue'
import { onLoad } from '@dcloudio/uni-app'
import { nextTick, ref } from 'vue'
import { useValidateRule } from '@/hooks/useValidate'
import * as pattern from '@/utils/pattern'
import { uploadImage } from '@/utils/upload'
import { getChildInfo } from '@/api/child.api'
import { editRescue, createChild } from '@/api/child.api'
import dayjs from 'dayjs'

const childId = ref('')

const childImg = ref(
  'https://gd-hbimg.huaban.com/05de4d7cd22a5b2ed2c867f6cd3b0912dca41b744bbf-Jlo45J_fw658webp'
)

const formRef = ref<typeof From>()

const { Rule } = useValidateRule()

const childInfo = ref<IChild>()

const schema = ref<IFormSchema[]>([
  {
    field: 'name',
    label: '儿童姓名',
    type: 'Input',
    placeholder: '请输入儿童姓名',
    cell: '儿童信息'
  },
  {
    field: 'phone',
    label: '手机号',
    type: 'Input',
    placeholder: '请输入手机号',
    cell: '儿童信息'
  },
  {
    field: 'homeAddress',
    label: '家庭地址',
    type: 'InputAddress',
    placeholder: '请输入家庭地址',
    cell: '儿童信息'
  },
  {
    field: 'birthday',
    label: '出生日期',
    type: 'Calendar',
    placeholder: '请选择出生日期',
    cell: '儿童信息'
  },
  {
    field: 'guardian',
    label: '监护人',
    type: 'Input',
    placeholder: '请输入监护人',
    cell: '儿童信息'
  },
  {
    field: 'gender',
    label: '性别',
    type: 'Select',
    placeholder: '请选择性别',
    options: [
      { id: '1', name: '男' },
      { id: '2', name: '女' }
    ],
    cell: '儿童信息'
  }
])

const submitForm = async (e: any) => {
  const params = {
    ...e,
    headImg: childImg.value || ''
  }
  params.birthday = dayjs(params.birthday).format('YYYY-MM-DD')
  params.gender = params.gender === '男' ? 1 : 2
  if (!childId.value) {
    params.userId = uni.getStorageSync('user')?.id || ''
    const res = await createChild<typeof params, IChild>(params)
    if (res.code === 200) {
      uni.showToast({
        title: '创建成功'
      })
    }
    return
  }
  params.childId = childId.value || ''
  const res = await editRescue<typeof params, IChild>(params)
  if (res.code === 200) {
    uni.showToast({
      title: '更新成功'
    })
  }
}

const rules = Rule([
  { field: 'name' },
  {
    message: '请输入正确手机号',
    checkType: 'RegExp',
    field: 'phone',
    pattern: pattern.mobileRegex
  }
])

const selectImage = async () => {
  const res = await uploadImage()
  if (res) {
    childImg.value = res
  }
}

onLoad(async (option: any) => {
  childId.value = option.childId
  if (!childId.value) {
    nextTick(() => {
      formRef.value?.register()
    })
    return
  }
  const res = await getChildInfo<any, IChild>({
    childId: option.childId
  })
  if (res.code === 200) {
    childInfo.value = res.data || {}
    childImg.value = res.data.headImg || ''
    nextTick(() => {
      formRef.value?.register()
    })
  }
})
</script>

<style scoped lang="scss">
.bg-i {
  border: 2rpx solid #999;
}
</style>
